<template>
  <div class="personal layout-pd">
    <el-row :gutter="5">
      <!-- 个人信息 -->
      <el-col :xs="24" :sm="24">
        <el-card shadow="hover" header="个人信息">
          <div class="personal-user">
            <div class="text-center">
              <el-avatar
                :size="100"
                :src="userInfos.avatar"
                @click="onUploadImage"
                class="cursor-pointer"
              />
              <div class="mt10" v-if="showDefaultBtn">
                <el-button size="small" @click="onDeleteImage">恢复默认头像</el-button>
              </div>
            </div>
            <div class="personal-user-right">
              <el-row>
                <el-col :span="24" class="personal-title mb18"
                  >{{ currentTime }}，<span class="color-primary">{{ userInfos.name }}</span
                  >，生活变的再糟糕，也不妨碍我变得更好！
                </el-col>
                <el-col :span="24">
                  <el-row>
                    <el-col :xs="24" :sm="8" class="personal-item mb15">
                      <div class="personal-item-label">昵称：</div>
                      <div class="personal-item-value">{{ userInfos.name }}</div>
                    </el-col>
                    <el-col :xs="24" :sm="16" class="personal-item mb15">
                      <div class="personal-item-label">身份：</div>
                      <div class="personal-item-value">{{ userInfos.role_name }}</div>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="24">
                  <el-row>
                    <el-col :xs="24" :sm="8" class="personal-item mb15">
                      <div class="personal-item-label">部门：</div>
                      <div class="personal-item-value">{{ userInfos.dep_name }}</div>
                    </el-col>
                    <el-col :xs="24" :sm="16" class="personal-item mb15">
                      <div class="personal-item-label">创建时间：</div>
                      <div class="personal-item-value">{{ userInfos.created_on }}</div>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="24">
                  <el-row>
                    <el-col :xs="24" :sm="8" class="personal-item mb15">
                      <div class="personal-item-label">岗位：</div>
                      <div class="personal-item-value">{{ userInfos.position_name }}</div>
                    </el-col>
                    <el-col :xs="24" :sm="16" class="personal-item mb15">
                      <div class="personal-item-label">员工码：</div>
                      <div class="personal-item-value">{{ userInfos.user_code }}</div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 消息通知 -->
      <el-col :xs="24" :sm="24" class="mt5">
        <el-card shadow="hover">
          <user-news :show-footer="false" :page-size="100" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="personal">
import { computed } from 'vue'
import { formatAxis } from '@/utils/formatTime'
import { useUserInfo } from '@/stores/userInfo'
import { useBaseFileApi } from '@/api/base'
import { useBaseRedisApi } from '@/api/base/redis'
import { ElMessage } from 'element-plus'
import { readFile } from 'vxe-pc-ui'

import UserNews from '@/layout/navBars/topBar/userNews.vue'

const { userInfos, setUserInfoAvatar } = useUserInfo()
const { SetBaseRedisCache, DeleteBaseRedisCache } = useBaseRedisApi()
const { UploadBaseImage } = useBaseFileApi()

const avatarKey = `${userInfos.login_name}_avatar`

// 当前时间提示语
const currentTime = computed(() => {
  return formatAxis(new Date())
})

// 显示恢复默认头像按钮
const showDefaultBtn = computed(() => {
  return userInfos.avatar.indexOf('/src/assets/sex') < 0
})

// 上传头像
const onUploadImage = async () => {
  const { file } = await readFile({ multiple: false })
  if (file) {
    const { data } = await UploadBaseImage([file])
    if (data.length) {
      const path = data[0].path
      await SetBaseRedisCache({ [avatarKey]: path })
      userInfos.avatar = path
      ElMessage.success('上传成功')
    }
  }
}

// 恢复默认头像
const onDeleteImage = async () => {
  await DeleteBaseRedisCache(avatarKey)
  await setUserInfoAvatar()
  ElMessage.success('恢复成功')
  console.log(userInfos.avatar)
}
</script>

<style scoped lang="scss">
@import '@/theme/mixins/index.scss';

.personal {
  .personal-user {
    height: 179px;
    display: flex;

    .personal-user-right {
      flex: 1;
      padding: 0 15px;

      .personal-title {
        font-size: 18px;
        @include text-ellipsis(1);
      }

      .personal-item {
        display: flex;
        align-items: center;
        font-size: 13px;

        .personal-item-label {
          color: var(--el-text-color-secondary);
          @include text-ellipsis(1);
        }

        .personal-item-value {
          @include text-ellipsis(1);
        }
      }
    }
  }

  .personal-recommend-row {
    .personal-recommend-col {
      .personal-recommend {
        position: relative;
        height: 100px;
        border-radius: 3px;
        overflow: hidden;
        cursor: pointer;

        &:hover {
          i {
            right: 0 !important;
            bottom: 0 !important;
            transition: all ease 0.3s;
          }
        }

        i {
          position: absolute;
          right: -10px;
          bottom: -10px;
          font-size: 70px;
          transform: rotate(-30deg);
          transition: all ease 0.3s;
        }

        .personal-recommend-auto {
          padding: 15px;
          position: absolute;
          left: 0;
          top: 5%;
          color: var(--next-color-white);

          .personal-recommend-msg {
            font-size: 12px;
            margin-top: 10px;
          }
        }
      }
    }
  }

  .personal-edit {
    .personal-edit-title {
      position: relative;
      padding-left: 10px;
      color: var(--el-text-color-regular);

      &::after {
        content: '';
        width: 2px;
        height: 10px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background: var(--el-color-primary);
      }
    }

    .personal-edit-safe-box {
      border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
      padding: 15px 0;

      .personal-edit-safe-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .personal-edit-safe-item-left {
          flex: 1;
          overflow: hidden;

          .personal-edit-safe-item-left-label {
            color: var(--el-text-color-regular);
            margin-bottom: 5px;
          }

          .personal-edit-safe-item-left-value {
            color: var(--el-text-color-secondary);
            @include text-ellipsis(1);
            margin-right: 15px;
          }
        }
      }

      &:last-of-type {
        padding-bottom: 0;
        border-bottom: none;
      }
    }
  }
}
</style>
